<template>
  <div class="pad-20 bgc-white">
    <div class="refund-base pad-20">
      <div class="_b-line font-16 font-color-3 pad-l-20 pad-r-20 pad-b-20">
        <span>退货地址:</span>
        <div class="mar-t-20">
          <span>收货人: {{refundInfo.refundReceiver}} {{refundInfo.refundReceiverPhone}}</span>
          <span>&nbsp;{{refundInfo.refundAddress}}</span>
        </div>
      </div>
      <div class="red-color flex-col pad-t-16 pad-l-20 pad-r-20 font-12">
        <span>注: 请仔细核对退货地址</span>
        <span>套装、带配件的衣服请完整退回，否则档口将有权拒绝退货</span>
      </div>
    </div>
    <div class="form-info mar-t-20">
      <div class="flex baseline">
        <span class="font-14 font-color-3">服务类型:</span>
        <span class="star-color mar-l-11">*</span>
        <div class="service-type-box">
          <el-radio-group class="flex-col" v-model="afterSaleInfo.afterSaleType" @change="changeAfterSaleType">
            <el-radio :label="20">仅退款</el-radio>
            <el-radio :label="10">退货退款</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="v-align-c refund-reson-box">
        <span class="font-14 font-color-3">退款原因:</span>
        <span class="star-color mar-l-11">*</span>
        <div class="mar-l-18">
          <el-select placeholder="请选择" v-model="afterSaleInfo.afterSaleReasonId">
            <el-option v-if="afterSaleInfo.afterSaleType === 20" 
            v-for="(item, index) of moneyReasonList" :key="index" :label="item.cancelReason" :value="item.reasonId" />
            <el-option v-if="afterSaleInfo.afterSaleType === 10"
            v-for="(item, index) of reasonList" :key="index" :label="item.cancelReason" :value="item.reasonId" />
          </el-select>
        </div>
      </div>
      <!-- <div class="v-align-c refund-reson-box" v-if="afterSaleInfo.afterSaleType === 10">
        <span class="font-14 font-color-3">快递公司:</span>
        <span class="star-color mar-l-11">*</span>
        <div class="mar-l-18">
          <el-select placeholder="请选择" v-model="expressInfo">
            <el-option v-for="(item, index) of expressList" :key="index" :label="item.expressName" :value="item.expressName + '-' + item.expressCode" />
          </el-select>
        </div>
      </div>
      <div class="v-align-c refund-reson-box" v-if="afterSaleInfo.afterSaleType === 10">
        <span class="font-14 font-color-3">快递单号:</span>
        <span class="star-color mar-l-11">*</span>
        <div class="mar-l-18">
          <el-input placeholder="请输入" v-model="afterSaleInfo.trackingNo"
          />
        </div>
      </div> -->
      <div class="flex replenish-box">
        <span class="font-14 font-color-3">补充说明:</span>
        <span class="star-color mar-l-11">*</span>
        <div class="flex-item mar-l-18">
          <el-input
            :rows="5"
            type="textarea" maxlength="200"
            placeholder="请输入说明" v-model="afterSaleInfo.customerRemark"
          />
        </div>
      </div>
      <div class="flex picture-box">
        <span class="font-14 font-color-3">图片证据:</span>
        
        <!--div class="flex-col upload-img-box flex-center">
          <span>
            <el-icon :size="28" color="#B6B6B6"><plus /></el-icon>
          </span>
          <div class="flex-col flex-center font-12 font-color-9">
            <span>上传凭证</span>
            <span>(最多上传10张)</span>
          </div>
        </div-->
        <upload :imageList="imageList" />
      </div>
      <div class="mar-t-20 btn-box">
        <div class="submit-btn font-16 flex flex-center cursor-p" @click="submitAfterSale">
          提交申请
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import upload from '../upload/index.vue'
import { Plus } from '@element-plus/icons-vue'
import { defineComponent, onMounted, ref, watch } from 'vue'
import { listAfterSaleReason, listExpress, doRefundOrder } from '@/api/order/aftersale'
import event from '@/model/event'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    Plus,
    upload
  },
  props: {
    refundInfo: {
      type: Object
    }
  },
  setup(props) {
    const router = useRouter()
    const afterSaleInfo = ref({
      afterSaleType: 20,
      afterSaleReasonId: '',
      customerRemark: ''
      // expressCode: '',
      // expressName: '',
      // trackingNo: ''
    })
    const goodsList = ref([{
      orderGoodsId: '',
      goodsNum: 1
    }])
    const moneyReasonList = ref([]) // 退款原因
    const reasonList = ref([]) // 退货退款原因
    // const expressList = ref([]) // 物流公司列表
    // const expressInfo = ref('')
    const imageList = ref([])
    
    // watch(expressInfo, (newVal, oldVal) => {
    //   if (newVal) {
    //     const arr = newVal.split('-')
    //     afterSaleInfo.value.expressName = arr[0]
    //     afterSaleInfo.value.expressCode = arr[1]
    //   }
    // })
    
    event.on('aftersale_refundGoodsNum', (data) => {
      goodsList.value[0].goodsNum = data
    })
    
    onMounted(() => {
      initAfterSaleReason()
      // initExpress()
    })
    
    const initAfterSaleReason = () => {
      listAfterSaleReason().then(response => {
        if (response.isError) return
        response.data.forEach((item, index) => {
          if (item.refundMoneyFlag === 1) {
            moneyReasonList.value.push(item)
          }
          if (item.refundFlag === 1) {
            reasonList.value.push(item)
          }
        })
      })
    }
    
    // const initExpress = () => {
    //   listExpress().then(response => {
    //     if (response.isError) return
    //     expressList.value = response.data
    //   })
    // }
    
    const changeAfterSaleType = () => {
      afterSaleInfo.value.afterSaleReasonId = ''
      afterSaleInfo.value.customerRemark = ''
      // afterSaleInfo.value.expressCode = ''
      // afterSaleInfo.value.expressName = ''
      // afterSaleInfo.value.trackingNo = ''
      // expressInfo.value = ''
    }
    
    const submitAfterSale = () => {
      if (goodsList.value[0].goodsNum < 1 || goodsList.value[0].goodsNum > props.refundInfo.goodsNum) {
        ElMessage.error('申请退换货数量输入有误！')
        return
      }
      if (!afterSaleInfo.value.afterSaleType) {
        ElMessage.error('请选择服务类型！')
        return
      }
      if (!afterSaleInfo.value.afterSaleReasonId) {
        ElMessage.error('请选择退款原因！')
        return
      }
      // if(afterSaleInfo.afterSaleType === 10) {
      //   if (!afterSaleInfo.value.expressName) {
      //     ElMessage.error('请选择快递公司！')
      //     return
      //   }
      //   if (!afterSaleInfo.value.trackingNo.trim()) {
      //     ElMessage.error('请输入快递单号！')
      //     return
      //   }
      // }
      if (!afterSaleInfo.value.customerRemark.trim()) {
        ElMessage.error('请填写补充说明！')
        return
      }
      afterSaleInfo.value.orderId = props.refundInfo.orderId
      afterSaleInfo.value.refundProvinceCode = props.refundInfo.refundProvinceCode
      afterSaleInfo.value.refundCityCode = props.refundInfo.refundCityCode
      afterSaleInfo.value.refundDistrictCode = props.refundInfo.refundDistrictCode
      afterSaleInfo.value.receiveName = props.refundInfo.refundReceiver
      afterSaleInfo.value.receivePhone = props.refundInfo.refundReceiverPhone
      afterSaleInfo.value.receiveAddress = props.refundInfo.receiveAddress
      goodsList.value[0].orderGoodsId = props.refundInfo.orderGoodsId
      afterSaleInfo.value.goodsList = goodsList.value
      let imageUrls = []
      imageList.value.forEach(image => {
        imageUrls.push(image.imageUrl)
      })
      afterSaleInfo.value.refundVoucherList = imageUrls
      doRefundOrder(afterSaleInfo.value).then(response => {
        if (response.isError) return
        // 创建售后订单并进入售后详情页
        ElMessage({
          message: '申请成功',
          type: 'success',
        })
        router.push({
          path: 'after-sales-detail',
          query: {
            orderId: afterSaleInfo.value.orderId
          }
        })
      })
    }
    
    return {
      afterSaleInfo,
      reasonList,
      moneyReasonList,
      changeAfterSaleType,
      // expressList,
      // expressInfo,
      submitAfterSale,
      imageList
    }
  }
})
</script>

<style lang="scss" scoped>
.refund-base {
  width: 1140px;
  background: #fafafa;
  height: 162px;
  margin: 0 auto;
}
._b-line {
  border-bottom: 1px solid #e5e5e5;
}
.red-color {
  color: #FF5252;
}
.service-type-box {
  margin-left: 23px;
}
.baseline {
  align-items: baseline;
}
.replenish-box {
  width: 500px;
  margin-top: 39px;
}
.picture-box {
  margin-top: 22px;
}
.upload-img-box {
  width: 120px;
  height: 120px;
  background: #FFFFFF;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  margin-left: 36px;
}
.form-info {
  padding-left: 65px;
}
.refund-reson-box {
  margin-top: 27px;
}
.btn-box {
  padding-left: 94px;
  box-sizing: border-box;
}
.submit-btn {
  width: 168px;
  height: 40px;
  background: #182245;
  color: #fff;
}
.star-color {
  color: #E31414;
}
</style>
